<template>
	<card-block title="资源热度">
		<template slot="tabs">
			<el-radio-group v-model="hotType" size="small">
				<el-radio-button label="1">今天</el-radio-button>
				<el-radio-button label="2">昨天</el-radio-button>
				<el-radio-button label="3">本月</el-radio-button>
				<el-radio-button label="4">上月</el-radio-button>
			</el-radio-group>
		</template>
		<template slot="content">
			<div class="hot_resource">
				<el-table :data="resourceRankData" height="100%" :show-header="false">
					<el-table-column width="36">
						<template slot-scope="{ $index }">
							<span class="index">{{ $index + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column min-width="250">
						<template slot-scope="{ row }">
							<el-link :href="`/#/data/resource/${row.resId}`" target="_blank">{{ row.resName }}</el-link>
						</template>
					</el-table-column>
					<el-table-column width="80" align="right">
						<template slot-scope="{ row }">
							<strong class="count">{{ row.count | clickCountFilter }}</strong>
						</template>
					</el-table-column>
					<template slot="empty">
						<el-empty :image-size="100" description="暂无热门资源"></el-empty>
					</template>
				</el-table>
			</div>
		</template>
	</card-block>
</template>

<script>
import cardBlock from './cardBlock';
import { getResourceRank } from '@/api/statistics';
export default {
	components: { cardBlock },
	data() {
		return {
			hotType: '4',
			resourceRankData: []
		};
	},
	filters: {
		clickCountFilter(input) {
			return Number(input) > 2048 ? '2048+ 点击' : `${input} 点击`;
		}
	},
	watch: {
		hotType: {
			handler(val) {
				this.getResourceRankData();
			},
			immediate: true
		}
	},
	methods: {
		async getResourceRankData() {
			let params = { limitCount: 5, type: this.hotType };
			let result = await getResourceRank(params).then((res) => res.data);
			if (result.code === '0') {
				this.resourceRankData = result.data || [];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.hot_resource::v-deep {
	padding: 0 16px 16px;
	box-sizing: border-box;
	height: 100%;
	.el-table {
		&::before {
			content: none;
		}
		.cell {
			padding: 0;
			line-height: 1;
		}
	}
	.el-table__cell {
		padding: 14px 0;
	}
	.el-table__row:hover td {
		background: none;
	}
	.el-table__empty-text {
		line-height: 1;
	}
	span.index {
		display: block;
		width: 24px;
		height: 24px;
		font-size: 14px;
		line-height: 24px;
		text-align: center;
		font-weight: bold;
		border-radius: 50%;
		color: var(--primary);
		background-color: var(--primary-background-plain);
	}
	strong.count {
		white-space: nowrap;
	}
	a.el-link {
		display: inline;
		max-width: 100%;
		line-height: 24px;
		text-decoration: none;
	}
	.el-link--inner {
		white-space: nowrap;
	}
}
</style>
